<template>
	<view class="">

		<view class="title-con">
			<view class="jiantou" @click="fanhui">
				<img src="./生活图片/cxy1_16.png">
			</view>
			<view class="title">
				潘祥记玫瑰饼
			</view>
			<view class="title-right">
				<view class="wx">
					<img src="./生活图片/cxy_12.png">
				</view>
				<view class="wx">
					<img src="./生活图片/cxy_14.png">
				</view>
				<view class="wx">
					<img src="./生活图片/cxy_13.png">
				</view>
			</view>
		</view>
		<view class="jifen-con">
			<view class="jifen-left">
				消耗积分:
				<p class="jifen-left-p">{{list.xjf}}</p>
				积分
			</view>
			<view class="jifen-right">
				可用积分:
				<p class="jifen-left-p">{{list.kjf}}</p>
				积分
			</view>
		</view>
		<view class="mgb-img">
			<img src="./生活图片/cxy_18.png">
		</view>
		<view class="mgb-img-p">
			详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情
		</view>
		<view class="mgb-img">
			<img src="./生活图片/cxy_11.png">
		</view>
		<view class="mgb-img-p">
			详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情
		</view>
		<view class="con">
			<view class="goumai">
				<view class="goumai-right">
					<view class="jian" @click="jian">
						<img src="./生活图片/cxy_19.png">
					</view>
					<view class="goumai-right-p">
						{{list.quantity}}

					</view>
					<view class="jia" @click="jia()">
						<img src="./生活图片/cxy_20.png">
					</view>
					<view class="shengxia">
						仅剩{{list.shengxia}}份
					</view>
				</view>
				<view class="goumai-left">

					<view class="goumai-qian">
						￥{{list.price}}.
					</view>
					<view class="goumai-qian-q">
						00
					</view>
					<view class="goumai-p" @click="qiang" v-show="xianshi">
						<p>{{list.qiang}}</p>
					</view>
					<view class="goumai-p-p" v-show="vshow">
						<p>积分不足</p>
					</view>
					<view class="goumai-p-p" v-show="shouwan">
						<p>已售完</p>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				num: 16,
				qian: undefined,
				id: 1,
				vshow: false,
				xianshi: true,
				shouwan: false

			}

		},
		onShow() {
			this.cxydetails()
		},
		methods: {
			cxydetails() {
				this.$api.getcxydetails().then((res) => {
					this.list = res.data[0]
					// console.log(this.list)
				})
			},
			fanhui() {
				uni.switchTab({
					url: '/pages/Home/Home'
				})
			},

			jia() {
				if (this.list.shengxia !== 0) {
					this.list.quantity++
					this.list.shengxia--
				} else {
					this.shouwan = true
					this.xianshi = false
					this.list.price = 0
					this.list.quantity = 1
				}

				if (this.list.quantity) {
					this.list.price = +this.list.price + this.num
				}

			},
			// 可用积分
			qiang() {
				if(this.list.quantity*this.list.xjf>this.list.kjf){
					this.vshow = true
					this.xianshi = false
					this.qian = 9
				}
				else{
					uni.navigateTo({
						url: `/pages/Home/cxydingdan?price=${this.list.price}&quantity=${this.list.quantity}`
					})
				}
				


			},
			jian() {
				if (this.list.quantity > 1) {
					this.list.shengxia++
					this.list.quantity--
					this.list.price = +this.list.price - this.num
				} else if (this.list.quantity = 1) {
					this.list.price = 16
				}
			},

		},



	}
</script>

<style>
	.con {
		width: 100%;
		height: 159px;
		background-color: #f2f2f2;
		position: absolute;
	}

	.title-con {
		width: 100%;
		height: 112upx;
		/* background-color: antiquewhite; */
		display: flex;
		justify-content: space-between;
	}

	.title {
		width: 33%;
		height: 100%;
		/* background-color: antiquewhite; */
		/* margin-left: 30upx; */
		line-height: 61px;
		text-align: center;
		font-size: 38upx;
		margin-left: -30upx;
		/* margin-top: 20upx; */
	}

	.jiantou {
		width: 33%;
		height: 90%;
		/* background-color: aquamarine; */
	}

	.jiantou img {
		width: 9%;
		height: 41%;
		margin-top: 24upx;
		margin-left: 20upx;
	}

	.title-right {
		width: 29%;
		height: 90%;
		/* background-color: blue; */
		display: flex;
		justify-content: space-around;

	}

	.wx {
		width: 40upx;
		height: 38upx;
		/* background-color: aqua; */
		margin-top: 16upx;
		margin-left: 20upx;

	}

	.wx img {
		width: 100%;
		height: 100%;
	}

	.mgb-img {
		width: 100%;
		height: 375upx;
		background-color: antiquewhite;
	}

	.mgb-img img {
		width: 100%;
		height: 100%;
	}

	.goumai {
		width: 100%;
		height: 128upx;
		background-color: #f7f7f7;
		/* background-color: red; */

		position: relative;
		top: 33%;
		display: flex;
	}

	.goumai-right {
		width: 50%;
		height: 100%;
		/* background-color: blue; */
		display: flex;
	}

	.goumai-left {
		width: 50%;
		height: 100%;
		/* background-color: teal; */
		display: flex;

	}

	.jian {
		width: 65upx;
		height: 65upx;
		border: 1px solid #faab34;
		/* background-color: #faab34; */
		border-radius: 50%;
		text-align: center;
		/* font-size: 60upx; */
		color: #fff;
		margin-top: 28upx;
		margin-left: 20upx;
	}

	.jian img {
		width: 55%;
		/* height:55%; */
		margin: 26upx auto;
	}

	.goumai-right-p {
		line-height: 57px;
		font-size: 40upx;
		color: #faab34;
		margin-left: 30upx;
	}

	.jia {
		width: 65upx;
		height: 65upx;
		/* border: 1px solid #faab34; */
		background-color: #faab34;
		border-radius: 50%;
		text-align: center;
		/* font-size: 60upx; */
		color: #fff;
		margin-top: 28upx;
		margin-left: 30upx;
	}

	.jia img {
		width: 55%;
		height: 55%;
		margin: 10upx auto;
	}

	.goumai-qian {
		line-height: 116upx;
		font-size: 40upx;
		color: #faab34;
	}

	.goumai-qian-q {
		line-height: 124upx;
		/* font-size: 40upx; */
		color: #faab34;
		margin-left: 10upx;
	}

	.goumai-p {
		width: 179upx;
		height: 100%;
		background-color: #faab34;
		margin-left: 60upx;
		text-align: center;
		line-height: 116upx;
		color: #fff;
		font-size: 40upx;
	}

	.goumai-p-p {
		width: 200upx;
		height: 100%;
		background-color: #999999;
		margin-left: 60upx;
		text-align: center;
		line-height: 116upx;
		color: #fff;
		font-size: 30upx;
	}

	.jifen-con {
		width: 100%;
		height: 85upx;
		/* background-color: aqua; */
		display: flex;
	}

	.jifen-left {
		width: 50%;
		height: 100%;
		/* background-color: aquamarine; */
		line-height: 78upx;
		font-size: 34upx;
		display: flex;
		margin-left: 20upx;
	}

	.jifen-left .jifen-left-p {
		color: #00b8fe;
		margin-left: 20upx;
	}

	.jifen-right {
		width: 50%;
		height: 100%;
		/* background-color: red; */
		line-height: 78upx;
		font-size: 34upx;
		display: flex;
		margin-left: 20upx;
		color: #666666;
	}

	.jifen-right .jifen-left-p {
		color: #00b8fe;
		margin-left: 20upx;
	}

	.shengxia {
		line-height: 124upx;
		font-size: 20upx;
		margin-left: 20upx;
	}
</style>
